<template>
	<view>
		<!-- 自定义导航 -->
		<newsNavBar :tabBars="tabBars" :tabIndex="tabIndex" @tabTap="tabTap"></newsNavBar>

		<!-- 列表 -->
		<view class="uni-tab-bar">
			<swiper
				class="swiper-box" 
				:style="{ height: swiperHeight+'px' }"
				:current="tabIndex"
				@change="tabChange"
			>
				<!-- 关注  -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadMore">
						<!-- 列表 -->
						<block v-for="(item, index) in guanzhu.list" :key="index">
							<commonList :item="item" :index="index"></commonList>
						</block>
						<!-- 上拉加载 -->
						<loadMore :loadMoreText="guanzhu.loadMoreText"></loadMore>
					</scroll-view>
				</swiper-item>
				<!-- 话题  -->
				<swiper-item>
					<scroll-view scroll-y class="list">
						<!-- 搜索框 -->
						<view class="search-input">
							<input class="uni-input" placeholder-class="icon iconfont icon-sousuo topic-search" placeholder=" 搜索内容" />
						</view>
						
						<!-- 轮播图 -->
						<swiper class="topic-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item v-for="(item, index) in topic.swiper" :key="index">
								<image :src="item.src" mode="widthFix" lazy-load></image>
							</swiper-item>
						</swiper>
						
						<!-- 热门分类 -->
						<topicNav :nav="topic.nav"></topicNav>
						
						<!-- 最近更新 -->
						<view class="topic-new">
							<view>最近更新</view>
							<block v-for="(item, index) in topic.list" :key="index">
								<topicList :item="item" :idnex="index"></topicList>
							</block>
							
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import newsNavBar from '../../components/news/news-nav-bar.vue'
	import commonList from '../../components/common/common-list.vue'
	import loadMore from '../../components/common/load-more.vue'
	import topicNav from '../../components/news/topic-nav.vue'
	import topicList from '../../components/news/topic-list.vue'
	export default {
		components: {
			newsNavBar,
			commonList,
			loadMore,
			topicNav,
			topicList
		},
		data() {
			return {
				tabIndex: 0,
				tabBars: [
					{
						id: 0,
						name: '关注'
					},
					{
						id: 1,
						name: '话题'
					}
				],
				guanzhu: {
					loadMoreText: '上拉加载更多',
					list: [
						// 图文列表
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							sex: 0, // 0：男， 1： 女
							age: 25,
							isguanzhu: false,
							title: '我是主标题',
							titlepic: '../../static/demo/datapic/13.jpg',
							video: false,
							share: false,
							path: '深圳 龙岗',
							commetNum: 22,
							shareNum: 99,
							zanNum: 33
						},
						// 视频列表
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							sex: 1, // 0：男， 1： 女
							age: 25,
							isguanzhu: false,
							title: '我是视频主标题',
							titlepic: '../../static/demo/datapic/13.jpg',
							video: {
								lonkNum: 2212,
								long: '2:22'
							},
							share: false,
							path: '深圳 龙岗',
							commetNum: 22,
							shareNum: 99,
							zanNum: 33
						},
						// 分享列表
						{
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							sex: 1, // 0：男， 1： 女
							age: 20,
							isguanzhu: false,
							title: '我是分享主标题',
							titlepic: '',
							video: false,
							share: {
								shareTile: '分享内容标题',
								shareTitlePic: '../../static/demo/datapic/19.jpg'
							},
							path: '深圳 龙岗',
							commetNum: 22,
							shareNum: 99,
							zanNum: 33
						}
					]
				},
				swiperHeight: 500, // swiper 的高度
				topic: {
					swiper: [
						{
							src: '../../static/demo/banner2.jpg'
						},
						{
							src: '../../static/demo/banner1.jpg'
						}
						,{
							src: '../../static/demo/banner1.jpg'
						}
					],
					nav: [
						{ name: '最新'},
						{ name: '游戏'},
						{ name: '打卡'},
						{ name: '情感'},
						{ name: '故事'},
						{ name: '喜爱'},
					],
					list: [
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我的话题描述',
							totalNum: 50,
							todayNum: 20
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我的话题描述',
							totalNum: 50,
							todayNum: 20
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我的话题描述',
							totalNum: 50,
							todayNum: 20
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我的话题描述',
							totalNum: 50,
							todayNum: 20
						},
						{
							titlepic: '../../static/demo/topicpic/13.jpeg',
							title: '话题名称',
							desc: '我的话题描述',
							totalNum: 50,
							todayNum: 20
						}
					]
				}
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res => {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperHeight = height
					// console.log(height)
				})
			})
		},
		methods: {
			// 点击切换
			tabTap(index) {
				this.tabIndex = index
			},
			// 滑动切换事件
			tabChange(e) {
				// console.log(e.detail)
				this.tabIndex = e.detail.current
			},
			// 上拉加载
			loadMore() {
				if(this.guanzhu.loadMoreText!="上拉加载更多"){ return; }
				// 修改状态
				this.guanzhu.loadMoreText="加载中...";
				// 获取数据
				setTimeout(()=> {
					//获取完成
					let obj={
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							sex: 0, // 0：男， 1： 女
							age: 25,
							isguanzhu: false,
							title: '我是主标题',
							titlepic: '../../static/demo/datapic/13.jpg',
							video: false,
							share: false,
							path: '深圳 龙岗',
							commetNum: 22,
							shareNum: 99,
							zanNum: 33
						};
					this.guanzhu.list.push(obj);
					this.guanzhu.loadMoreText="上拉加载更多";
				}, 1000);
				// this.guanzhu.loadMoreText="没有更多数据了";
			}
		}
	}
</script>

<style lang="scss">
.list{
		height: 100%;
	}
	// 搜索
.search-input{
	// border: 1upx solid;
	padding: 20upx;
	input {
		// border: 1upx solid;
		background-color: #F4F4F4;
		border-radius: 10upx;
	}
	.topic-search{
		display: flex;
		justify-content: center;
		font-size: 26upx;
	}
}
// 轮播
.topic-swiper{
	padding: 0 20upx 20upx 20upx;
	// padding: 20upx;
	image {
		width: 100%;
		border-radius: 10upx;
	}
}

// 最近更新
	.topic-new{
		padding: 20upx;
		&>view {
			&:first-child {
				color: #333333;
				font-size: 32upx;
				padding-bottom: 10upx;
			}
		}
		
	}
</style>
